<template>
    <div class="page_root" :key="queryUpdateFlag" data-page-name="1" data-page-identification="x_hb0xe6o0k2">
        <a-spin :spinning="pageLoading.loading" :tip="pageLoading.tip">
            <!-- begin vid_q2pj193dfc 自定义模板_7xu4mdl9mj -->

          <!--          新建/编辑工单-->
          <a-modal
            centered
            v-model:visible="state.addOrEditVisible"
            :title="state.modalTitle"
            @ok="submit"
            @cancel="fatherCancel"
            width="1000px"
            destroy-on-close
            :ok-button-props="{ loading: state.fatherLoading }"
          >
            <div class="form-content">
              <a-form :model="state.modalForm" ref="formRef">
                <a-row>
                  <a-col :span="24">
                    <a-form-item
                      label="工单标题"
                      :rules="[{ required: true, message: '请输入工单标题', trigger: 'blur' }]"
                      name="content"
                    >
                      <a-textarea
                        maxlength="100"
                        show-count
                        placeholder="请输入"
                        v-model:value="state.modalForm.content"
                      />
                    </a-form-item>
                  </a-col>
                  <a-col :span="12">
                    <a-form-item
                      label="工单类型"
                      :rules="[{ required: true, message: '请选择工单类型', trigger: 'blur' }]"
                      name="type"
                    >
                      <a-select
                        :options="[
                                            {
                                                label: '产品问题',
                                                value: '产品问题'
                                            },
                                            {
                                                label: '数据问题',
                                                value: '数据问题'
                                            },
                                            {
                                                label: '算法问题',
                                                value: '算法问题'
                                            },
                                            {
                                                label: '系统故障',
                                                value: '系统故障'
                                            },
                                            {
                                                label: '产品需求',
                                                value: '产品需求'
                                            },
                                            {
                                                label: '算法需求',
                                                value: '算法需求'
                                            }
                                        ]"
                        v-model:value="state.modalForm.type"
                        placeholder="请选择"
                        @change="hanldeTypeChange"
                      />
                    </a-form-item>
                  </a-col>
                  <a-col :span="12">
                    <a-form-item
                      label="场景类型"
                      :rules="[{ required: true, message: '请选择工单类型', trigger: 'blur' }]"
                      name="type"
                    >
                      <a-select
                        :options="[
                                            {
                                                label: '产品问题',
                                                value: '产品问题'
                                            },
                                            {
                                                label: '数据问题',
                                                value: '数据问题'
                                            },
                                            {
                                                label: '算法问题',
                                                value: '算法问题'
                                            },
                                            {
                                                label: '系统故障',
                                                value: '系统故障'
                                            },
                                            {
                                                label: '产品需求',
                                                value: '产品需求'
                                            },
                                            {
                                                label: '算法需求',
                                                value: '算法需求'
                                            }
                                        ]"
                        v-model:value="state.modalForm.type"
                        placeholder="请选择"
                        @change="hanldeTypeChange"
                      />
                    </a-form-item>
                  </a-col>
                  <a-col :span="12">
                    <a-form-item
                      label="优先级"
                      :rules="[{ required: true, message: '请选择优先级', trigger: 'blur' }]"
                      name="priority"
                    >
                      <a-select
                        :disabled="state.modalForm.type === '产品需求'"
                        v-model:value="state.modalForm.priority"
                        :options="[
                                            {
                                                label: 'p0',
                                                value: 'p0'
                                            },
                                            {
                                                label: 'p1',
                                                value: 'p1'
                                            },
                                            {
                                                label: 'p2',
                                                value: 'p2'
                                            },
                                            {
                                                label: 'p3',
                                                value: 'p3'
                                            }
                                        ]"
                        placeholder="请选择"
                        @change="getSolveTimeByType"
                      />
                    </a-form-item>
                  </a-col>
                </a-row>

                <a-row>
                  <a-col :span="12" v-if="state.modalForm.type !== '产品需求'">
                    <a-form-item
                      label="计划解决时长(小时)"
                      :rules="[
                                        {
                                            pattern: new RegExp(/^(0(\.5)?|[1-9](\d*)?(\.5)?(\.0)?)$/),
                                            message: '请输入大于0的数字(支持0.5的倍数)',
                                            trigger: 'blur'
                                        }
                                    ]"
                      name="workHours"
                    >
                      <a-input-number
                        placeholder="请输入"
                        v-model:value="state.modalForm.workHours"
                        @change="getSolveTime"
                      />
                    </a-form-item>
                  </a-col>
                  <a-col :span="12">
                    <a-form-item
                      label="计划解决时间"
                      :rules="[{ required: true, message: '请选择计划解决时间', trigger: 'blur' }]"
                      name="endTime"
                    >
                      <a-date-picker
                        show-time
                        placeholder="请选择"
                        v-model:value="state.modalForm.endTime"
                        value-format="YYYY-MM-DD HH:mm:ss"
                      />
                    </a-form-item>
                  </a-col>
                </a-row>
                <a-row>
                  <a-col :span="12">
                    <a-form-item
                      label="问题来源"
                      :rules="[{ required: true, message: '请选择问题来源', trigger: 'blur' }]"
                      name="questionSource"
                    >
                      <a-select
                        v-model:value="state.modalForm.questionSource"
                        :options="[
                                            {
                                                label: '400',
                                                value: '400'
                                            },
                                            {
                                                label: '现场反馈',
                                                value: '现场反馈'
                                            },
                                            {
                                                label: '系统自检',
                                                value: '系统自检'
                                            }
                                        ]"
                        placeholder="请选择"
                      />
                    </a-form-item>
                  </a-col>
                  <a-col :span="12">
                    <a-form-item
                      label="所属区域"
                      :rules="[{ required: true, message: '请选择所属区域', trigger: 'blur' }]"
                      name="areaCode"
                    >
                      <a-select
                        allow-clear
                        show-search
                        :options="state.areaList"
                        placeholder="请选择"
                        v-model:value="state.modalForm.areaCode"
                        @focus="getAreaList"
                        :field-names="{ label: 'label', value: 'value' }"
                        :filter-option="
                                            (input, option) => {
                                                return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
                                            }
                                        "
                        @change="areaChange"
                      />
                    </a-form-item>
                  </a-col>
                </a-row>
                <a-row>
                  <a-col :span="12">
                    <a-form-item
                      label="所属客户"
                      :rules="[{ required: true, message: '请输入所属客户', trigger: 'blur' }]"
                      name="customer"
                    >
                      <a-select
                        allow-clear
                        show-search
                        :options="state.customList"
                        placeholder="请选择"
                        v-model:value="state.modalForm.customer"
                        @focus="getCustomerList"
                        :field-names="{ label: 'name', value: 'name' }"
                        :filter-option="
                                            (input, option) => {
                                                return option.name.toLowerCase().indexOf(input.toLowerCase()) >= 0
                                            }
                                        "
                        @change="customerChange"
                      />
                    </a-form-item>
                  </a-col>
                  <a-col :span="12">
                    <a-form-item
                      label="所属项目"
                      :rules="[{ required: true, message: '请选择所属项目', trigger: 'blur' }]"
                      name="projectId"
                    >
                      <a-select
                        allow-clear
                        show-search
                        :options="state.projectList"
                        placeholder="请选择"
                        v-model:value="state.modalForm.projectId"
                        :field-names="{ label: 'projectName', value: 'projectId' }"
                        :filter-option="
                                            (input, option) => {
                                                return (
                                                    option.projectName.toLowerCase().indexOf(input.toLowerCase()) >= 0
                                                )
                                            }
                                        "
                        @focus="getProjectList"
                        @change="projectChange"
                      />
                    </a-form-item>
                  </a-col>
                </a-row>
                <a-row>
                  <a-col :span="12">
                    <a-form-item
                      label="环境"
                      :rules="[{ required: true, message: '请选择环境', trigger: 'blur' }]"
                      name="environment"
                    >
                      <a-select
                        show-search
                        allow-clear
                        :options="state.environmentList"
                        placeholder="请选择"
                        v-model:value="state.modalForm.environment"
                        :field-names="{ label: 'name', value: 'name' }"
                        :filter-option="
                                            (input, option) => {
                                                return option.name.toLowerCase().indexOf(input.toLowerCase()) >= 0
                                            }
                                        "
                        @focus="getEnvironmentList"
                        @change="environmentChange"
                      />
                    </a-form-item>
                  </a-col>
                  <a-col :span="12">
                    <a-form-item
                      label="所属产品"
                      :rules="[{ required: true, message: '请选择所属产品', trigger: 'blur' }]"
                      name="production"
                    >
                      <a-select
                        show-search
                        allow-clear
                        :options="state.productList"
                        placeholder="请选择"
                        v-model:value="state.modalForm.production"
                        @change="productChange"
                        @focus="getProductList"
                        :field-names="{ label: 'name', value: 'name' }"
                        :filter-option="
                                            (input, option) => {
                                                return option.name.toLowerCase().indexOf(input.toLowerCase()) >= 0
                                            }
                                        "
                      />
                    </a-form-item>
                  </a-col>
                </a-row>
                <a-row>
                  <a-col :span="12">
                    <a-form-item label="版本">
                      <a-input v-model:value="state.modalForm.version" disabled />
                    </a-form-item>
                  </a-col>
                </a-row>
                <div class="description-tip" v-if="currentData.status !== '未开始' && currentData.status"
                ><ExclamationCircleFilled class="tip-img" /> 解决中的工单不支持编辑问题描述</div
                >
                <a-row
                  :style="{
                                pointerEvents:
                                    currentData.status === '未开始' ||
                                    !currentData.status ||
                                    currentData.status === '待分发'
                                        ? 'auto'
                                        : 'none'
                            }"
                >
                  <a-col :span="24">
                    <a-form-item
                      label="问题描述"
                      :rules="[{ required: true, message: '请输入问题描述', trigger: 'blur' }]"
                      name="qillData"
                    >
                      <QuillEditor
                        v-model:content="state.modalForm.qillData"
                        ref="quillEditor"
                        :options="editorOption"
                        class="quill-editor"
                      />
                    </a-form-item>
                  </a-col>
                </a-row>
                <a-col :span="24">
                  <a-form-item label="上传附件">
                    <a-upload
                      v-model:file-list="state.modalForm.descriptionAttachmentList"
                      :multiple="true"
                      :before-upload="handlerFatherUpload"
                      @remove="handlerFatherRemove"
                      accept=".xlsx, image/*,.docx,, .xls,.mp4"
                    >
                      <a-button type="primary">
                        <upload-outlined />
                        上传
                      </a-button>
                    </a-upload>
                    <span>支持格式：.xlsx, image/*,.docx,, .xls,.mp4</span>
                  </a-form-item>
                </a-col>
              </a-form>
            </div>
          </a-modal>
          <!--          新建/编辑工单-->



            111 {{ content }}
            <div class="publish-form-container">
                <div class="publish-form">
                    <div class="form-group">
                        <QuillEditor v-model:content="content" :options="editorOption" class="quill-editor" />
                    </div>
                </div>
            </div>
            <a-button @click="submitForm">submitForm</a-button>
            <!-- end vid_q2pj193dfc 自定义模板_7xu4mdl9mj -->
        </a-spin>
    </div>
</template>
<script setup lang="tsx">
    import {
        h,
        ref,
        reactive,
        toRaw,
        markRaw,
        watch,
        computed,
        onBeforeMount,
        onMounted,
        onBeforeUnmount,
        onUnmounted,
        onActivated,
        onDeactivated
    } from 'vue'
    import { useRoute, useRouter } from 'vue-router'
    const router = useRouter()
    const route = useRoute()
    import { get, post, put, del, request, requestWithHeaders } from '@/utils/http/Axios'
    import {
        cloneDeep,
        localGet,
        merge,
        getDifferenceArray,
        traversalTreeStructure,
        checkCaseCondition,
        renderStringInTemplate,
        handleBreadcrumbJump,
        throttle,
        permission,
        getComponentParamsValue
    } from '@/utils/index'
    import { isNullOrEmpty, isEmptyArr, isNullOrUnDef, isContained, isArray, isEmpty, isObject } from '@/utils/is'
    import dayjs from 'dayjs'
    import { getPagePcChartsDataSourceConvert } from '@/utils/chart'
    import { message, notification, Modal } from 'ant-design-vue'
    import {
        propertyFormatByNumber,
        propertyFormatByPercentage,
        propertyFormatByDate,
        parseSubFromDataList
    } from '@/utils/format'
    import colorTheme from '@/design/custom-theme.json'
    /*** PUBLISH_EXEGESIS ***
 import UserTableRecords from '@/model/UserTableRecords';
 import { getAppBaseUrl } from '@/utils/index';
 import { sendToken } from "@/hooks/useIframeToken";
 import { useSystemStore } from "@/store/modules/system";
 const systemStore = useSystemStore();
 *** PUBLISH_EXEGESIS ***/

    // 获取传入的流程ID和组件参数
    const props = defineProps({
        'processInstanceId': {
            type: [String, Number, Boolean],
            default: undefined
        }
    })
    const immediateWatch = (source, callback) => {
        watch(source, callback, { deep: true, immediate: true })
    }

    /* -------------------------- 属性定义 -------------------------- */

    const setTimeOutList = []
    const pageLoading = reactive({
        loading: false,
        tip: undefined
    })
    const authInfo = localGet('app-user-store')

    // 处理校验
    const setSubFormName = (parentInfo, name) => {
        return [parentInfo.parents, parentInfo.cycleIndex, name]
    }

    /* ========================== 属性定义 ========================== */

    /* -------------------------- 元素数据引用 -------------------------- */

    /* ========================== 元素数据引用 ========================== */

    /* -------------------------- 页面数据 -------------------------- */

    /* ========================== 页面数据 ========================== */

    /* -------------------------- 响应 -------------------------- */

    /* ========================== 响应 ========================== */

    /* -------------------------- 函数 -------------------------- */

    /* ========================== 函数 ========================== */

    /* -------------------------- 页面参数 -------------------------- */

    const pageParameter_state = reactive({
        'processInstanceId': props.processInstanceId ?? route.query.processInstanceId
    })

    /* ========================== 页面参数 ========================== */

    /* -------------------------- 组件事件处理方法 -------------------------- */

    // ---------------------------- 组件数据同步 ----------------------------

    // ============================ 组件数据同步 ============================

    /* ========================== 组件事件处理方法 ========================== */

    /* -------------------------- 生命周期 -------------------------- */
    // 用于参数变更后重新执行自定义指令
    const queryUpdateFlag = ref(0)
    onMounted(() => {})

    onUnmounted(() => {
        // 销毁定时器
        setTimeOutList.forEach(({ repeat, timer }) => {
            repeat ? clearInterval(timer) : clearTimeout(timer)
        })
    })

    /* ========================== 生命周期 ========================== */

    /* -------------------------- 数据关联处理 -------------------------- */

    /* -------------------------- 表单数据同步 -------------------------- */
    /* ========================== 表单数据同步 ========================== */

    /* ========================== 数据关联处理 ========================== */

    /* -------------------------- 不同组件自定义的处理逻辑 -------------------------- */

    /* ========================== 不同组件自定义的处理逻辑 ========================== */

    // ================================定制化逻辑========================================
    onMounted(() => {
        initTitle()
    })
    import { QuillEditor, Quill } from '@vueup/vue-quill'
    import ImageUploader from 'quill-image-uploader'
    import '@vueup/vue-quill/dist/vue-quill.snow.css'
    // 注册自定义字体到 Quill
    const Font = Quill.import('formats/font')
    Font.whitelist = [
        'SimSun',
        'SimHei',
        'Microsoft-YaHei',
        'KaiTi',
        'FangSong',
        'Arial',
        'Times-New-Roman',
        'sans-serif'
    ]
    Quill.register(Font, true)
    const titleConfig = [
        { Choice: ' .ql-bold', title: '加粗' },
        { Choice: ' .ql-italic', title: '斜体' },
        { Choice: ' .ql-underline', title: '下划线' },
        { Choice: ' .ql-strike', title: '删除线' },
        { Choice: ' .ql-blockquote', title: '块引用' },
        { Choice: ' .ql-code-block', title: '插入代码' },
        { Choice: ' .ql-size', title: '字体大小' },
        { Choice: ' .ql-size', title: '字体大小' },
        { Choice: ' .ql-color', title: '字体颜色' },
        { Choice: ' .ql-background', title: '字体背景颜色' },
        { Choice: ' .ql-list[value="ordered"]', title: '有序列表' },
        { Choice: ' .ql-list[value="bullet"]', title: '无序列表' },
        { Choice: ' .ql-header[value="1"]', title: '1级标题' },
        { Choice: ' .ql-header[value="2"]', title: '2级标题' },
        { Choice: ' .ql-align', title: '对齐方式' },
        { Choice: ' .ql-clean', title: '清除字体格式' },
        { Choice: ' .ql-image', title: '图像' },
        { Choice: ' .ql-size .ql-picker-item[data-value="small"]', title: '小号' },
        { Choice: ' .ql-size .ql-picker-item[data-value="large"]', title: '大号' },
        { Choice: ' .ql-size .ql-picker-item[data-value="huge"]', title: '超大号' },
        { Choice: ' .ql-size .ql-picker-item:nth-child(2)', title: '标准' },
        { Choice: ' .ql-align .ql-picker-item:first-child', title: '居左对齐' },
        { Choice: ' .ql-align .ql-picker-item[data-value="center"]', title: '居中对齐' },
        { Choice: ' .ql-align .ql-picker-item[data-value="right"]', title: '居右对齐' },
        { Choice: ' .ql-align .ql-picker-item[data-value="justify"]', title: '两端对齐' }
    ]
    // 注册图片上传模块
    Quill.register('modules/imageUploader', ImageUploader)

    // 模拟上传API
    const uploadFileAPI = async fileData => {
        // 模拟上传返回URL
        return new Promise(resolve => {
            setTimeout(() => {
                resolve({ data: { filePath: 'https://lalallalal.com/' + fileData.file.name } })
            }, 1000)
        })
    }

    // 将本地文件转换为URL
    const getLocalImageURL = file => {
        return new Promise(resolve => {
            const reader = new FileReader()
            reader.onload = e => {
                resolve(e.target.result)
            }
            reader.readAsDataURL(file)
        })
    }

    // 表单数据
    const title = ref('')
    const type = ref('')
    const content = ref( {
      "ops": [
        { "attributes": { "color": "#e60000" }, "insert": "123" },
        { "insert": "\n" },
        { "attributes": { "color": "#e60000" }, "insert": "规范电饭锅" },
        { "attributes": { "list": "ordered" }, "insert": "\n" },
        { "insert": "放大发的" },
        { "attributes": { "list": "ordered" }, "insert": "\n" }
      ]
    })
// const  content = ref('')
    console.log(content.value);
    // Quill 编辑器选项
    const editorOption = ref({
        modules: {
            imageUploader: {
                upload: async file => {
                    const localUrl = await getLocalImageURL(file)
                    return localUrl // 返回本地图片的 URL 进行预览
                }
            },
            toolbar: [
                // [{ font: Font.whitelist }], // 字体
                ['bold', 'italic', 'underline', 'strike'], // 加粗，斜体，下划线，删除线
                ['blockquote', 'code-block'], // 引用，代码块
                [{ header: 1 }, { header: 2 }], // 标题1，标题2
                [{ list: 'ordered' }, { list: 'bullet' }], // 有序列表，无序列表
                // [{ script: 'sub' }, { script: 'super' }], // 上标，下标
                // [{ indent: '-1' }, { indent: '+1' }], // 缩进
                // [{ direction: 'rtl' }], // 文字方向
                [{ size: ['small', false, 'large', 'huge'] }], // 文字大小
                // [{ header: [1, 2, 3, 4, 5, 6, false] }], // 标题大小
                [{ color: [] }, { background: [] }], // 字体颜色，背景颜色
                [{ align: [] }], // 对齐
                ['clean'], // 清除格式
                ['image'] // 链接，图片，视频
            ]
        }
    })

    // 提交表单的方法
    const submitForm = async () => {
        // 创建虚拟 DOM 来解析内容
        const parser = new DOMParser()
        const doc = parser.parseFromString(content.value, 'text/html')

        // 查找所有的本地图片
        const images = doc.querySelectorAll('img')
        const imageUploadPromises = []

        images.forEach(img => {
            const localSrc = img.getAttribute('src')

            // 如果是本地图片，上传图片并替换URL
            if (localSrc.startsWith('data:')) {
                const uploadPromise = uploadFileAPI({ file: dataURLtoFile(localSrc, 'image.png') }).then(res => {
                    img.setAttribute('src', res.data.filePath) // 替换成服务器上的图片URL
                })
                imageUploadPromises.push(uploadPromise)
            }
        })

        // 等待所有图片上传完成后提交表单
        try {
            await Promise.all(imageUploadPromises)

            // 上传完成后，更新内容
            const updatedContent = doc.body.innerHTML

            const payload = {
                title: title.value,
                content: updatedContent,
                type: type.value
            }

            console.log('提交的内容:', payload)

            const response = await fetch('/api/posts', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify(payload)
            })
            const data = await response.json()
            console.log('发布成功', data)
        } catch (error) {
            console.error('发布失败', error)
        }
    }

    // 将 dataURL 转换为 File 对象的辅助函数
    const dataURLtoFile = (dataurl, filename) => {
        const arr = dataurl.split(',')
        const mime = arr[0].match(/:(.*?);/)[1]
        const bstr = atob(arr[1])
        let n = bstr.length
        const u8arr = new Uint8Array(n)
        while (n--) {
            u8arr[n] = bstr.charCodeAt(n)
        }
        return new File([u8arr], filename, { type: mime })
    }
    watch(content, newContent => {
        console.log('当前内容:', newContent) // 打印当前的内容
    })
    function initTitle() {
        document.getElementsByClassName('ql-editor')[0].dataset.placeholder = ''
        for (let item of titleConfig) {
            let tip = document.querySelector('.ql-toolbar' + item.Choice)
            if (!tip) continue
            tip.setAttribute('title', item.title)
        }
    }
</script>
<style lang="less" scoped>
    .page_root {
        width: 100%;
        height: 100%;
        overflow: auto;
    }
    .page_root :deep(.@{ant-prefix}-spin-nested-loading),
    .page_root :deep(.@{ant-prefix}-spin-container) {
        height: 100%;
    }
    .page_root :deep(.@{ant-prefix}-spin-container .@{ant-prefix}-table-wrapper) {
        display: flex;
        flex-flow: column nowrap;
        justify-content: flex-start;
    }
    .page_root :deep(.@{ant-prefix}-table) {
        flex: auto;
        overflow: auto;
    }
    .table-moreBtn_down {
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        width: 100px;
    }

    .table-moreBtn_menu :deep(.table-moreBtn_menu-item):hover {
        background: #ebf1ff;
    }

    /*  表格树结构样式处理，展开按钮层级增加*/
    :deep(.@{ant-prefix}-table-row-expand-icon) {
        z-index: 1;
    }
    /*  表格树结构 由于每个表格项采用自定义组件，使用绝对定位布局，开启树结构导致显示异常，暂时使用层级定位位置 */
    :deep(.@{ant-prefix}-table-row-level-1 .@{ant-prefix}-table-cell-with-append .cell-wrapper-left) {
        left: 15px !important;
        width: calc(100% - 15px);
    }
    :deep(.@{ant-prefix}-table-row-level-2 .@{ant-prefix}-table-cell-with-append .cell-wrapper-left) {
        left: 30px !important;
        width: calc(100% - 30px);
    }
    :deep(.@{ant-prefix}-table-row-level-3 .@{ant-prefix}-table-cell-with-append .cell-wrapper-left) {
        left: 45px !important;
        width: calc(100% - 45px);
    }
    :deep(.@{ant-prefix}-table-row-level-4 .@{ant-prefix}-table-cell-with-append .cell-wrapper-left) {
        left: 60px !important;
        width: calc(100% - 60px);
    }

    /* 穿梭框改变默认样式，为根据组件样式控制左右栏宽度。 */
    :deep(.@{ant-prefix}-transfer-list) {
        height: 100%;
        width: 50%;
    }

    /*样式*/
    .ql-snow .ql-picker.ql-font .ql-picker-label[data-value='SimSun']::before,
    .ql-snow .ql-picker.ql-font .ql-picker-item[data-value='SimSun']::before {
        content: '宋体';
        font-family: 'SimSun';
    }
    .ql-snow .ql-picker.ql-font .ql-picker-label[data-value='SimHei']::before,
    .ql-snow .ql-picker.ql-font .ql-picker-item[data-value='SimHei']::before {
        content: '黑体';
        font-family: 'SimHei';
    }
    .ql-snow .ql-picker.ql-font .ql-picker-label[data-value='Microsoft-YaHei']::before,
    .ql-snow .ql-picker.ql-font .ql-picker-item[data-value='Microsoft-YaHei']::before {
        content: '微软雅黑';
        font-family: 'Microsoft YaHei';
    }
    .ql-snow .ql-picker.ql-font .ql-picker-label[data-value='KaiTi']::before,
    .ql-snow .ql-picker.ql-font .ql-picker-item[data-value='KaiTi']::before {
        content: '楷体';
        font-family: 'KaiTi';
    }
    .ql-snow .ql-picker.ql-font .ql-picker-label[data-value='FangSong']::before,
    .ql-snow .ql-picker.ql-font .ql-picker-item[data-value='FangSong']::before {
        content: '仿宋';
        font-family: 'FangSong';
    }
    .ql-snow .ql-picker.ql-font .ql-picker-label[data-value='Arial']::before,
    .ql-snow .ql-picker.ql-font .ql-picker-item[data-value='Arial']::before {
        content: 'Arial';
        font-family: 'Arial';
    }
    .ql-snow .ql-picker.ql-font .ql-picker-label[data-value='Times-New-Roman']::before,
    .ql-snow .ql-picker.ql-font .ql-picker-item[data-value='Times-New-Roman']::before {
        content: 'Times New Roman';
        font-family: 'Times New Roman';
    }
    .ql-snow .ql-picker.ql-font .ql-picker-label[data-value='sans-serif']::before,
    .ql-snow .ql-picker.ql-font .ql-picker-item[data-value='sans-serif']::before {
        content: 'sans-serif';
        font-family: 'sans-serif';
    }

    .ql-font-SimSun {
        font-family: 'SimSun';
    }
    .ql-font-SimHei {
        font-family: 'SimHei';
    }
    .ql-font-Microsoft-YaHei {
        font-family: 'Microsoft YaHei';
    }
    .ql-font-KaiTi {
        font-family: 'KaiTi';
    }
    .ql-font-FangSong {
        font-family: 'FangSong';
    }
    .ql-font-Arial {
        font-family: 'Arial';
    }
    .ql-font-Times-New-Roman {
        font-family: 'Times New Roman';
    }
    .ql-font-sans-serif {
        font-family: 'sans-serif';
    }

    /*样式*/
    :deep(.ql-toolbar) {
        background: #fafafa;
        border: 1px solid #d9d9d9;
        border-radius: 2px 2px 0 0;
    }
    :deep(.ql-blank) {
        min-height: 110px;
        background: #ffffff;
    }
    :deep(.ql-editor) {
        min-height: 110px;
        background: #ffffff;
    }
</style>
